<template>
  <div style="position: relative">
    <n-layout has-sider class="w-screen h-screen min-w-1000px">
      <n-layout-sider
          bordered
          collapse-mode="width"
          :collapsed-width="64"
          :width="200"
          :collapsed="collapsed"
          show-trigger="bar"
          @collapse="editzhankai(true)"
          @expand="editzhankai(false)"
          class="bg-cyan-100"

      >
        <n-menu
            :collapsed="collapsed"
            :collapsed-width="64"
            :collapsed-icon-size="22"
            :options="menuOptions"
            :indent="12"
            :render-label="renderMenuLabel"
            :render-icon="renderMenuIcon"
            :expand-icon="expandIcon"
            class="bg-opacity-20"
            :on-update:value="tiaozhuan"
        />
      </n-layout-sider>
      <n-layout>
        <n-layout-header bordered class="bg-stone-300">
          <myheader/>
        </n-layout-header>
        <n-layout-content class="pl-20px bg-gray-100 relative">
          <div class="absolute top-0 left-0 right-0 h-8 overflow-hidden border-b border-gray-400"></div>
          <div class="absolute top-8 left-20px right-0 bottom-0">
            <router-view v-slot="{ Component }">
              <transition>
                <keep-alive include="cachelist">
                  <component :is="Component"/>
                </keep-alive>
              </transition>
            </router-view>
          </div>
        </n-layout-content>
      </n-layout>
      <div class="fixed inset-0 bg-gray-600 juzhong1 z-999" v-if="layoutaction.lockscreen">
        <div class="w-600px h-600px juzhong1 flex-col" v-if="startunlock">
          <div>
            <n-avatar
                :size="100"
                :src="useraction.touxiang || touxiang"
                class="my-1"
            />
          </div>
          <div class="my-1">{{ useraction.name }}</div>
          <div class="my-1">
            <n-input v-model:value="password" type="password"></n-input>
          </div>
          <div class="my-1">
            <n-button class="text-blue-500" @click="fannhui()">返回</n-button>
            <n-button class="text-blue-500 mx-3" @click="gotologin">重新登录</n-button>
            <n-button class="text-blue-500" @click="opensystem">进入系统</n-button>
          </div>
        </div>
        <div v-else class="w-full h-full flex flex-col justify-center items-center">
          <div class="juzhong1 flex-col">
           <span class="text-white text-8xl">{{
               shijian.toLocaleString("zh", {
                 hour12: false,
                 hour: 'numeric',
                 minute: 'numeric',
                 second: 'numeric'
               })
             }}</span>
            <span class="text-white text-3xl">{{
                shijian.toLocaleString("zh", {
                  year: 'numeric',
                  month: 'numeric',
                  day: 'numeric',
                  weekday: "long"
                })
              }}</span>
          </div>
          <div>
            <n-icon size="100" @click="kaishijiesuo">
              <UnlockOutlined></UnlockOutlined>
            </n-icon>
          </div>
          <div class="text-3xl">
            天气模块
          </div>
        </div>
      </div>
    </n-layout>
  </div>
</template>

<script setup name="mainobj">
import {useRoute, useRouter} from "vue-router";
import myheader from "./myheader.vue"
import {useLayout} from "../../store/moduls/layout";
import {NIcon, useMessage, useDialog} from "naive-ui"
import {ChevronDownOutline, AccessibilitySharp} from "@vicons/ionicons5"
import {UnlockOutlined} from "@vicons/antd"
import {Book, BookOpen} from "@vicons/fa"
import usetime from "../../hooks/mytime";
import {useUserInfo} from "../../store/moduls/userinfo";
import http from "@/request/request"
import {h} from "vue";

const router = useRouter()
const route = useRoute()
const shijian = usetime()
const dialog = useDialog()
const layoutaction = useLayout()
const useraction = useUserInfo()
const message = useMessage()
// 默认的头像
const touxiang = ref("http://101.43.194.47:9000/file/yuangong.webp")
// 解锁的密码
const password = ref("")
const collapsed = computed(() => layoutaction.zhankai)
const editzhankai = (jieguo) => {
  layoutaction.changezhankai(jieguo)
}
// 解锁
const jiesuo = () => {
  layoutaction.changelock(false)
}
// 开始解锁
const startunlock = ref(false)
const daojishi = ref(0)
const kaishijiesuo = () => {
  startunlock.value = true
  daojishi.value = 30
  setTimeout(xunhuan1, 1000)
}
const xunhuan1 = () => {
  daojishi.value = daojishi.value - 1
  // 如果已经解锁就停止循环
  if (!layoutaction.lockscreen) {
    daojishi.value = 0
    startunlock.value = false
  } else if (daojishi.value <= 0) {
    // 如果时间到了，就回到锁屏界面
    daojishi.value = 0
    startunlock.value = false
  } else {
    //  如果时间没到就继续计时
    setTimeout(xunhuan1, 1000)
  }
}
// 点击返回
const fannhui = () => {
  daojishi.value = -1
}
// 点击重新登录
const gotologin = () => {
  useraction.zhuxiao()
  router.replace({name: "Login"})
}

// 点击进入系统
const opensystem = () => {
  const username = useraction.username
  http.login({username: username, password: password.value}).then(({data}) => {
    if (data.code === 0) {
      message.success("验证成功")
      jiesuo()
    } else {
      data.error ? Object.values(data.error).forEach(item => {
        message.error(item)
      }) : message.error(data.msg || "登录失败")
    }
  }).catch(err => {
    message.error(err)
  })
}
const menuOptions = ref([
  {
    label: "仪表台",
    key: '仪表台',
    children: [
      {
        label: "主控台",
        key: "主控台",
      },
      {
        label: "监控台",
        key: "监控台",
      },
      {
        label: "工作台",
        key: "Work",
      },
    ]
  },
  {
    label: "系统管理",
    key: "系统管理",
    children: [
      {
        label: "菜单管理",
        key: 'Menumanager'
      },
      {
        label: "角色管理",
        key: 'Rolemanager'
      },
      {
        label: "字典管理",
        key: 'Dictmanager'
      },
    ]
  },
  {
    label: "博客管理",
    key: "博客管理",
    children: [
      {
        label: "栏目管理",
        key: 'Lanmu'
      },
      {
        label: "内容管理",
        key: 'Neirong'
      },
      {
        label: "标签管理",
        key: 'Biaoqian'
      },
    ]
  },
  {
    label: '个人中心',
    key: 'usercenter',
    children: [
      {
        label: '账户信息',
        key: 'Userinfo'
      },
      {
        label: '个人信息',
        key: 'Persioninfo'
      }
    ]
  },
  {
    label: '通讯中心',
    key: 'contact',
    children: [
      {
        label: '邮件管理',
        key: 'Email'
      },
      {
        label: '在线聊天',
        key: 'Webchat'
      }
    ]
  },
  {
    label: "人事管理",
    key: "人事管理",
    children: [
      {label: "部门管理", key: "Partmanager"},
      {label: "职位管理", key: "Positionmanager",},
      {
        label: "员工管理", key: "Workermanager", children: [
          {label: "员工信息", key: "员工信息"},
          {label: "员工关系", key: "员工关系"},
        ],
      },
      {
        label: "招聘管理", key: "Recruitmanager", children: [
          {label: "招聘职位", key: "招聘职位",},
          {label: "面试安排", key: "面试安排",},
          {label: "人才库", key: "人才库",},
        ]
      },
    ],
  },
  {
    label: "出入库管理",
    key: "出入库管理",
    children: [
      {label: "仓库管理", key: "Warehousemanager"},
      {label: "出库管理", key: "Outwarehouse",},
      {label: "入库管理", key: "Inwarehouse",},
      {label: "库存统计", key: "Inwarehouse",},
    ],
  },
  {
    label: "产品管理",
    key: "产品管理",
    children: [
      {label:"产品信息",key:"Productinfo",},
      {label:"产品工艺",key:"Producttechnology",},
      {label:"辅料管理",key:"Accessories",},
      {label:"原料管理",key:"Rawmaterial",},
    ],
  },
  {
    label: "行政管理",
    key: "行政管理",
    children: [
      {label:"通知公告",key:"Noticemanager",},
    ],
  },
])
// 渲染完整文字
const renderMenuLabel = (option) => {
  return h("span", null, {
    default: () => {
      return option.label
    }
  })
}
// 只渲染图标
const renderMenuIcon = (option) => {
  return h(NIcon, null, {default: () => h(collapsed.value ? Book : BookOpen)})
}
// 不渲染
const expandIcon = (option) => {
  return h(NIcon, null, {default: () => h(ChevronDownOutline)})
}
// 点击菜单跳转
const tiaozhuan = (key, item) => {
  router.push({name: key})
}

const deletemodel = (shaxinfunc, delfunc, itemid, itemname = null) => {
  const init = () => {
    const cc = dialog.warning({
      title: "删除",
      content: () => {
        return h("div", {class: {"w-300px h-20px": true},}, {
          default() {
            return itemname ? `确认删除${itemname}？` : "确认删除这条数据？"
          }
        })
      },
      positiveText: '删除',
      negativeText: '取消',
      showIcon: false,
      onPositiveClick: () => {
        cc.loading = true
        delfunc(null, itemid).then(res => {
          if (res && res.data.code === 0) {
            getsuccess()
          } else {
            getfaild(res.data.toString())
          }
        }).catch(err => {
          getfaild(err)
        })
      },
    })
  };
  const getsuccess = () => {
    const aa = dialog.success({
      title: "删除成功",
      content: () => {
        return h("span", {}, {
          default() {
            return "删除数据成功！"
          }
        })
      },
      negativeText: '关闭',
      showIcon: false,
    })
    setTimeout(() => {
      shaxinfunc()
      aa.destroy()
    }, 1000)
  }
  const getfaild = (errortext) => {
    dialog.error({
      title: "删除失败",
      content: () => {
        return h("span", {}, {
          default() {
            return errortext || "删除错误"
          }
        })
      },
      negativeText: '关闭',
      showIcon: false,
    })
  }
  init()
}

// 生命周期区域
// onMounted(()=>{
//   if(useraction.id===""){
//     router.replace({name:"Login"})
//   }
// })

// 初始化区域
provide('deletemodel', deletemodel); // provide的第一个为名称，第二个值为所需要传的参数
</script>

<style>
</style>
